<template>
    <div id="login_bg">
        <div id="login_title"></div>
        <div id="login_box">
            <div class="login_row login_top">
                <img class="left_icon" src="~@/assets/login/username.png" alt="">
                <img src="~@/assets/login/ge.png" alt="">
                <input v-model="username" @keyup.enter="login" type="text" />
            </div>
            <div class="login_row" style="margin-bottom: 20px">
                <img class="left_icon" src="~@/assets/login/password.png" alt="">
                <img src="~@/assets/login/ge.png" alt="">
                <input v-model="password" @keyup.enter="login" type="password">
            </div>
            <div class="login_row_me">
                <input v-model="rememberMe" type="checkbox"> <span>记住密码</span>
            </div>
            <div>
                <button @click="login" id="login_btn">登录</button>
            </div>
        </div>
    </div>
</template>

<script>

import md5 from "js-md5";
import { mapActions } from 'vuex'
import Vue from "vue";
import {dbSet} from "@/libs/db";

export default {
    name: "login",
    data() {
        return {
            username: "",
            password: "",
            rememberMe: false,
        };
    },
    methods: {
        ...mapActions('store/user', [
            'userLogin'
        ]),
        async login() {
            if (this.username == "") {
                this.$message.info("请输入用户名!");
                return;
            }
            if (this.password == "") {
                this.$message.info("请输入密码!");
                return;
            }
            let data = {
                username: this.username,
                password: md5(this.password),
                that:Vue.prototype,
                to: this.$route.query.redirect || '/index'
            };
            let result=await this.userLogin(data)
            if(result===false){
                return ''
            }
            await this.$router.push(this.$route.query.redirect || '/index');
        },

        toTree(data) {
            // 删除 所有 children,以防止多次调用
            data.forEach(function (item) {
                delete item.children;
            });
            // 将数据存储为 以 id 为 KEY 的 map 索引数据列
            var map = {};
            data.forEach(function (item) {
                map[item.id] = item;
            });
            // console.log(map);
            var val = [];
            data.forEach(function (item) {
                // 以当前遍历项，的pid,去map对象中找到索引的id
                var parent = map[item.parentId];
                // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
                if (parent) {
                    item.parentName = parent.name;
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
                    val.push(item);
                }
            });
            return val;
        },
    },
    mounted() {
        dbSet({dbName: "token", value:''});

    }
};

</script>

<style scoped>
#login_bg {
    height: 100%;
    width: 100%;
    min-width: 900px;
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
    position: relative;
    background-image: url("~@/assets/login/bg.png");
}

#login_title {
    position: absolute;
    width: 1325px;
    height: 171px;
    background: url("~@/assets/login/title.png") no-repeat;
    left: 50%;
    bottom: 80%;
    transform: translate(-50%, 70%);
}

#login_box {
    width: 610px;
    height: 510px;
    background-image: url("~@/assets/login/login_box.png");
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%, 20%);
}

.login_top {
    margin-top: 130px;
}

.login_row {
    display: flex;
    margin-left: 92px;
    width: 426px;
    height: 62px;
    background-image: url("~@/assets/login/input.png");
    margin-bottom: 50px;
}

.login_row img {
    width: 1px;
    height: 31px;
    margin: 15px;
}

.login_row .left_icon {
    width: 28px;
    height: 36px;
    margin-right: 0;
}

.login_row input {
    height: 62px;
    background: transparent;
    border: none;
    outline: medium;
    color: #42ec8c;
    font-size: 20px;
    width: 360px;
}
.login_row_me {
    text-align: right;
    margin-right: 95px;
    color: #41ec8d;
    line-height: 21px;
    margin-bottom: 30px;
}
/* 复选框 */
input[type="checkbox"] {
    -webkit-appearance: none; /*清除复选框默认样式*/
    border: 1px solid #41ec8d;
    vertical-align: middle;
    width: 21px;
    height: 21px;
    margin-top: 0;
    margin-right: 0 !important;
    border-radius: 0;
}
input[type="checkbox"]:checked {
    /* background-position: -48px 0; */
    background: url("~@/assets/login/me.png"); /*复选框的背景图*/
    background-size: contain;
}
#login_btn {
    width: 426px;
    height: 62px;
    background: url("~@/assets/login/button.png");
    border: none;
    outline: medium;
    margin-left: 92px;
    color: #42ec8d;
    font-size: 26px;
}
</style>
